<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link th:href="@{/ifavicon.ico}" rel="shortcut icon"/>
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
    <title>商品列表</title>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/jquery.cookie-1.4.0.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/goods_js.js}"></script>
</head>
<body>
<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" href="javascript:void (0);">商品列表</a>
    </li>
</ul>
<table class="table">
    <thead>
    <tr>
        <th scope="col">商品ID</th>
        <th scope="col">商品名称</th>
        <th scope="col">商品描述</th>
        <th scope="col">价格</th>
        <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="goods:${goodsList}">
        <th scope="row" th:text="${goods.id}">商品ID</th>
        <td th:text="${goods.name}">商品名称</td>
        <td th:text="${goods.description}">商品描述</td>
        <td th:text="${goods.price}">价格</td>
        <td>
<!--            <a class="btn btn-primary" th:href="@{'/goods/' + ${goods.id} + '/detail'}">立即购买</a>-->
            <button type="button" class="btn btn-primary" onclick="goods_js.goodsDetail([[${goods.id}]])" th:onclick="goods_js.goodsDetail([[${goods.id}]])">立即购买</button>
<!--            <button type="button" class="btn btn-primary" onclick="goods_js.goodsDetail([[${goods.id}]])">立即购买</button>-->
        </td>
    </tr>
    </tbody>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">请登录</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="phone_number" class="col-form-label">手机号:</label>
                            <input type="tel" class="form-control" id="phone_number" aria-describedby="telHelp" maxlength="11">
                            <small id="telHelp" class="form-text text-muted">We'll never share your phone with anyone else.</small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="goods_js.login()" th:onclick="goods_js.login()">确定</button>
                </div>
            </div>
        </div>
    </div>
</table>
<th:block th:include="include :: footer"/>

<script type="text/javascript">
    // 页面加载方法
    $(function(){
        goods_js.init();
    });
</script>
</body>
</html>